<template>
	<view class="box">
		<!-- <u-button type="primary" text="确定"></u-button>
				<u-button type="primary" :plain="true" text="镂空"></u-button>
				<u-button type="primary" :plain="true" :hairline="true" text="细边"></u-button>
				<u-button type="primary" :disabled="disabled" text="禁用"></u-button>
				<u-button type="primary" loading loadingText="加载中"></u-button>
				<u-button type="primary" icon="map" text="图标按钮"></u-button>
				<u-button type="primary" shape="circle" text="按钮形状"></u-button>
				<u-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
				<u-button type="primary" size="small" text="大小尺寸"></u-button> -->
		<view @click="search">
			<u-search height='35' bg-color='#F6F6F6' shape="round" placeholder="请输入关键字搜索"
				:show-action='false'></u-search>
		</view>

		<!-- 轮播图 -->
		<view class="broadcast">
			   <u-swiper
			                :list="list"
			                @change="e => current = e.current"
			                :autoplay="false"
			        >
			            <view
			                    slot="indicator"
			                    class="indicator"
			            >
			                <view
			                        class="indicator__dot"
			                        v-for="(item, index) in list"
			                        :key="index"
			                        :class="[index === current && 'indicator__dot--active']"
			                >
			                </view>
			            </view>
			        </u-swiper>
		</view>
		<view class="mall" @click="mall">
			<span class="size">商城<span class="headlines">头条</span></span>
			<span style="color: darkgray; margin-left: 20rpx;">|</span>
			<span class="new">最新</span>
			<span class="malltitle">演示商品: 请勿下单</span>
			<span class="icon"><u-icon name='arrow-right'></u-icon></span>
		</view>

			<view v-for="item in user" class="xyt" @click="center(item)">
				<img :src="item.url" alt="" class="user-img"/>
				<view  class="user-title">{{item.title}}</view>
			</view>
		
		<view v-for="item in shoping" class="shopping" @click="shopping(item)">
			<img :src="item.url" alt="" class="shop-img"/>
			<view class="shopping-title">{{item.title}}</view><br>
			<view class="shoppingi">{{item.i}}</view>
			<view class="price">{{item.t}}</view>
			<view class="mai">购买</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:'',
				//轮播图数据
				list: [
					'https://gw.alicdn.com/imgextra/i2/O1CN01nlPQ9s1y3aKUb5tDo_!!6000000006523-0-tps-800-450.jpg',
					'https://gw.alicdn.com/imgextra/i4/O1CN01ZaP2Or1ZzsLJJb4Wg_!!6000000003266-0-tps-800-450.jpg',
					'https://cdn.uviewui.com/uview/swiper/1.jpg'
				],
				user: [{
						url: '../../static/user.png',
						title: '个人中心',
						usercenter:'/pages/personalCenter/personalCenter',
						type:1
					},
					{
						url: '../../static/youhui.png',
						title: '优惠卷',
						type:0,
						usercenter:'/pages/rollCenter/rollCenter',
					},
					{
						url: '../../static/miaosha.png',
						title: '秒杀',
						type:0,
						usercenter:'/pages/seckill/seckill',
					},
					{
						url: '../../static/tuangou.png',
						title: '团购',
						type:0,
						usercenter:'/pages/groupBuying/groupBuying',
					},
					{
						url: '../../static/kanjia.png',
						title: '砍价',
						type:0,
						usercenter:'/pages/bargainPrice/bargainPrice',
					},
					{
						url: '../../static/kefu.png',
						title: '客服',
						usercenter:'/pages/customerService/customerService',
						type:0
					},
					{
						url: '../../static/shoucang.png',
						title: '收藏',
						type:0,
						usercenter:'/pages/myCollection/myCollection',
					},
					{
						url: '../../static/jifen.png',
						title: '积分商城',
						type:0,
						usercenter:'/pages/pointsMall/pointsMall',
					},
					{
						url: '../../static/kefu.png',
						title: '新闻资讯',
						type:0,
						usercenter:'/pages/newsList/newsList',
					},
					{
						url: '../../static/jifen.png',
						title: '订单',
						type:0,
						usercenter:'/pages/orderList/orderList',
					},
				],
				shoping: [{
						url: '../../static/maozi.png',
						title: '羊羔毛皮毛一体外套女欧洲站秋冬2021新款欧货女装时尚洋气机车服',
						i: '￥0.1',
						t: '￥128',
						http:'/pages/productDetails/productDetails'
					},
					{
						url: '../../static/yi.png',
						title: '大码女装减龄显瘦打底上衣2021秋冬新款胖mm翻领复古条纹针织衫女',
						i: '￥0.1',
						t: '￥128'
					},
					{
						url: '../../static/qun.png',
						title: 'NAZ那子大码女装秋冬宽松百搭羊羔毛加厚时尚个性胖mm机车外套',
						i: '￥0.1',
						t: '￥128'
					},
					{
						url: '../../static/hy.png',
						title: '欧洲站女装2021冬季洋气格纹撞色羊羔毛皮毛一体帅气机车外套保暖',
						i: '￥0.1',
						t: '￥128'
					},
					{
						url: '../../static/maozi.png',
						title: '羊羔毛皮毛一体外套女欧洲站秋冬2021新款欧货女装时尚洋气机车服',
						i: '￥0.1',
						t: '￥128'
					}
				]
			}
		},
		methods: {
			//搜索跳转
			search() {
				
				uni.navigateTo({
					url: '/pages/search/search' 
				})
				
			},
			center(item){
				if (item.type==1) {
				uni.switchTab({
					url:item.usercenter
				})
				} else{
					uni.navigateTo({
						url: item.usercenter
					})
				}
			},
			// 商城公告跳转
			mall(){
				uni.navigateTo({
					url:'/pages/mallAnnouncement/mallAnnouncement'
				})
			},
			//商品详情跳转
			shopping(item){
				uni.navigateTo({
					url:item.http
				})
			}
		}
	}
</script>

<style lang="scss">
	  .indicator {
	        @include flex(row);
	        justify-content: center;
	
	        &__dot {
	             height: 6px;
	             width: 6px;
	             border-radius: 100px;
	             background-color: rgba(255, 255, 255, 0.35);
	             margin: 0 5px;
	             transition: background-color 0.3s;
	    
	            &--active {
	                 background-color: #ffffff;
	             }
	        }
	    }
	.box {
		/* background-color: #F6F6F6; */
		margin-left: 15rpx;
		margin-right: 15rpx;
	}

	.broadcast {
		margin-top: 20rpx;
		border-radius: 30rpx;
	}

	.size {
		font-weight: 700;
		font-style: italic;
	}
	.new{
		/* width: 150rpx;
		height: 150rpx; */
		/* padding: 6rpx; */
		padding-left: 15rpx;
		padding-bottom: 6rpx;
		padding-right: 15rpx;
		margin-left: 25rpx;
		border: 1rpx solid red;
		color: red;
		border-radius: 25rpx;
		font-size: 25rpx;
	}

	.xyt {
		text-align: center;
		/* 	width: 120rpx;
		height: 140rpx; */
		margin-left: 22rpx;
		margin-top: 40rpx;
		float: left;
	}

	.shopping {
		float: left;
		margin-top: 50rpx;
	}

	.price {
		margin-top: 100rpx;
		font-size: 28rpx;
		color: gray;
		text-decoration: line-through;
		float: left;
	}

	.mai {
		margin-top: 100rpx;
		float: right;
		width: 120rpx;
		height: 50rpx;
		background-color: red;
		color: white;
		text-align: center;
		border-radius: 25rpx;
	}
	.shoppingi{
		color: red;
		 margin-top: 100rpx;
		  float: left;
	}
	.shopping-title{
		font-weight: 400;
		margin-left: 10rpx;
	}
	.mall{
		margin-top: 20rpx;
		 margin-left: 10rpx;
	}
	.shop-img{
		width: 280rpx;
		height:280rpx; 
		float: left;
	}
	.headlines{
		color: red;
	}
	.user-img{
		width: 120rpx;
		height: 110rpx;
	}
	.malltitle{
		margin-left: 15rpx;
	}
	.icon{
		float: right;
	}
	.user-title{
		font-size: 26rpx;
	}
</style>